<template>
    <div class="map">

        <div class="top">
            <p class="info">
                <span>平台高峰预警信息</span>
                <span>(2条)</span>
            </p>
        </div>
        <span class="title">
            <span class="content">景区实时客流量</span>
        </span>
        <div class="charts" ref="charts"></div>
    </div>
</template>
<script setup name='map'>
    import { ref, onMounted } from 'vue'
    import * as echarts from 'echarts'
    let charts = ref()
    import chinaJson from './china.json'
    //注册中国地图
    echarts.registerMap('china', chinaJson)
    onMounted(() => {
        let mycharts = echarts.init(charts.value)
        mycharts.setOption({
            //地图组件
            geo: {
                map: 'china', //中国地图
                roam: true, //鼠标缩放的效果
                //地图的位置调试
                top: 200,
                zoom: 1.4,
                //地图上的文字的设置
                label: {
                    show: true, //文字显示出来
                    color: 'white',
                    fontSize: 14,
                },
                itemStyle: {
                    //每一个多边形的样式
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'skyblue', // 0% 处的颜色
                            },
                            {
                                offset: 0.8,
                                color: 'blue', // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                    opacity: 0.6,
                },
                //地图高亮的效果
                emphasis: {
                    itemStyle: {
                        color: 'pink',
                    },
                    label: {
                        color: '#fff',
                    },
                }
            
            },
            series: [
                    {
                        type:'lines',
                        data: [ 
                            {
                                coords: [
                                    [116.405285, 39.904989], // 起点
                                    [119.306239, 26.075302], // 终点
                                ],
                                // 统一的样式设置
                                lineStyle: {
                                    color: 'orange',
                                    width: 10,
                                },
                            },
                            {
                                coords: [
                                    [116.405285, 39.904989], // 起点
                                    [114.298572, 30.584355], // 终点
                                ],
                                // 统一的样式设置
                                lineStyle: {
                                    color: 'yellow',
                                    width: 10,
                                },
                            }],
                            //开启动画特效
                            effect:{
                                show:true,
                                symbol:'arrow',color:'red',symbolSize:30
                            }
                      
                    }
                ]
        })
    })

</script>
<style scoped lang='scss'>
    .map {
        margin-left: 20px;

        .top {
            height: 50px;
            background: url('@/views/screen/images/dataScreen-header-warn-bg.png') no-repeat;
            /* 设置背景图在容器中居中 */
            background-position: center;
            text-align: center;
            line-height: 50px;

            .info {
                font-size: 18px;
                color: #fff;
            }
        }

        .title {
            display: block;
            width: 300px;
            height: 40px;
            background: url('@/views/screen/images/map-title-bg.png') no-repeat;
            text-align: center;
            line-height: 40px;
            color: white;

            .content {
                font-size: 20px;
                letter-spacing: 5px;
                margin-left: 20px;
            }

        }

        .charts {
            height: 600px;

        }
    }
</style>